<template>
	<nut-config-provider theme="dark">
		<image class="bg" src="../static/bg.png"></image>
		<view class="layout">
			<view class="safe" :style="{height: `${height}px`}"></view>
			<view class="main" :style="{height: `calc(100vh - ${height}px - 200px)`}">
				<slot></slot>
			</view>
			<nut-tabbar 
				class="tabBar"
				v-model="activeName"
				@tab-switch="tabChange"
				active-color="rgb(87, 150, 92)"
				unactive-color="rgb(186, 188, 194)"
				bottom safe-area-inset-bottom placeholder>
				<nut-tabbar-item 
					v-for="(nav, index) in tabBar.list" 
					:key="index" 
					:tab-title="nav.text" 
					:name="nav.text" 
					:icon="nav.icon"
				/>
			</nut-tabbar>
		</view>
	</nut-config-provider>
</template>

<style>
	.layout {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		position: absolute;
		background-color: transparent;
	}
	.bg {
		height: 100vh;
		width: 100vw;
		position: absolute;
	}
	.safe {
		background-color: transparent;
	}
	.main {
		flex: 1;
		color: white;
		padding: 16rpx 16rpx 24rpx 16rpx;
		color: #2b2b2b;
		background-color: transparent;
	}
</style>

<script setup lang="ts">
	import { onShow } from '@dcloudio/uni-app'
	import{ ref } from 'vue'
	import { find } from 'lodash'
	import { tabBar } from '@/pages.json'
	import UniApp from '@/utils/uni'
	const uniApp = new UniApp(uni)
	const findBar = (ifs: any) => {
		return find(tabBar.list, ifs)
	}
	const getBar = () => {
		const pages = getCurrentPages();
		const page = pages[pages.length - 1];
		return findBar({ pagePath: page.route })
	}
	const bar: any = getBar()
	const activeName = ref<string>('')	
	const height = ref<number>(0)	
	const viewHeight = ref<number>(0)
	const tabChange = (_: any, name: number) => {
		activeName.value = ''
		const cur: any = findBar({ text: name })
		uni.switchTab({ url: '/' + cur?.pagePath })
	}
	onShow(() => {
		activeName.value = bar.text
		uniApp.system((res: any) => {
			height.value = res.safeTop
			viewHeight.value = res.height
		})
	})
</script>